<template>
    <div>
        <div v-if="currentPanel == 'list'">
            <!--搜索框-->
            <el-card class="box-card">
                <div>
                    <el-form :inline="true" :model="queryData" class="user-search">
                        <el-form-item>
                            <el-input v-model="queryData.tracingPosterName" placeholder="输入溯源海报名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="queryData.tracingPosterStatus" placeholder="二维码状态">
                                <el-option
                                        v-for="item in tracingPosterStatu"
                                        :key="item.tracingPosterStatus"
                                        :label="item.tracingPosterStatus"
                                        :value="item.tracingPosterStatus"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="queryData.channel" placeholder="活动渠道">
                                <el-option
                                        v-for="item in channels"
                                        :key="item.channel"
                                        :label="item.channel"
                                        :value="item.channel"/>
                            </el-select>
                        </el-form-item>
                        <el-date-picker
                                v-model="queryData.date"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="活动开始日期"
                                end-placeholder="活动结束日期"
                                align="right">
                        </el-date-picker>
                        <el-form-item>
                            <el-button type="primary"
                                       @click="queryDataHandle(pagePagination.currentPage,pagePagination.pageSize)">查询
                            </el-button>
                            <el-button @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>

                </div>
            </el-card>
            <div class="interspaceH"></div>
            <!--表格-->
            <div>
                <el-card class="box-card">
                    <!--新建溯源码-->
                    <el-button type="primary" @click="currentHandler('add')">新建溯源码</el-button>

                    <div class="interspaceH"></div>
                    <!--                    <el-table :data="tableData" style="width: 100%">-->
                    <el-table @selection-change="tableRowChange" :data="tableData"
                              :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
                        <el-table-column prop="tracingPosterName" label="溯源海报名称" width="250">
                        </el-table-column>
                        <el-table-column prop="channel" label="活动渠道" width="250">
                        </el-table-column>
                        <el-table-column prop="name" label="活动名称" width="250">
                        </el-table-column>
                        <el-table-column prop="tracingPosterTime" label="有效时间" width="400">
                        </el-table-column>
                        <el-table-column prop="tracingPosterStatus" label="状态" width="250"
                                         :filters="tableData.tracingPosterStatus">
                            <template slot-scope="scope">
                                <el-tag>{{ scope.row.tracingPosterStatus }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="250">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="tuiguang(scope.row)">推广</el-button>
                                <!--              <el-button type="text" size="small" @click="fabu">发布</el-button>-->
                                <!--                                              <el-button type="text" size="small" @click="statisti(scope.row)">统计</el-button>-->
                                <!--                                <el-button type="text" size="small" @click="updates(scope.row)">编辑</el-button>-->
                                <el-button type="text" size="small" @click="deletes(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--分页-->
                    <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                                   @current-change="queryDataHandle($event,pagePagination.pageSize)"
                                   :current-page="pagePagination.currentPage"
                                   :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                                   layout="total, sizes, prev, pager, next"
                                   :total="pagePagination.total">
                    </el-pagination>
                </el-card>
            </div>
            <!--发布对话框-->
            <div>
                <el-dialog
                        title="提示"
                        :visible.sync="dialogVisible"
                        width="30%"
                        :before-close="handleClose">
                    <span>是否确认发布溯源码</span>
                    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
                </el-dialog>
            </div>
        </div>
        <!--推广页面-->
        <div>
            <el-dialog title="关联活动链接" :visible.sync="popularize" width="30%" :close-on-click-modal="false">
                <div class="m-alert">
                    <span class="el-icon-info"></span>
                    <div>
                        <div style="font-size: 20px"></div>
                        <div>1、复制链接通过链接打开页面</div>
                        <div>2、Ctrl+S另存为，选择网页，单个文件下载到本地打开</div>
                    </div>
                </div>
                <div style="height: 20px"></div>
                <el-form ref="form" :model="query" label-width="90px">
                    <el-form-item>
<!--                        <el-button size="small" class="title" @click="xiazai(query.tracingPosterUrl)">下载封面</el-button>-->
                        <el-button @click="fuzhi(query.tracingPosterUrl)">复制封面链接</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
        <!--编辑页面-->
        <div>
            <el-dialog :title="titles" :visible.sync="edit" width="30%" :close-on-click-modal="false">
                <el-form label-width="120px" :model="table" ref="editForm">
                    <el-form-item label="分享链接封面" prop="tracingPosterImage">
                        <el-radio label="1" v-model="table.tracingPosterImage">默认封面</el-radio>
                        <el-radio label="2" v-model="table.tracingPosterImage">自定义封面</el-radio>
                    </el-form-item>
                    <el-form-item label="链接分享标题" prop="shareTitle">
                        <el-radio label="1" v-model="table.shareTitle">活动名称</el-radio>
                        <el-radio label="2" v-model="table.shareTitle">自定义标题</el-radio>
                        <div v-if="table.shareTitle == '2'">
                            <el-input style="width: 260px" v-model="table.title"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="活动描述" prop="tracingPosterDescription">
                        <el-input
                                style="width: 260px"
                                type="textarea"
                                :rows="2"
                                placeholder="喊好友来参加"
                                v-model="table.tracingPosterDescription">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="tracingPosterStatus">
                        <el-select v-model="table.tracingPosterStatus" placeholder="二维码状态" style="width: 260px">
                            <el-option
                                    v-for="item in tracingPosterStatu"
                                    :key="item.tracingPosterStatus"
                                    :label="item.tracingPosterStatus"
                                    :value="item.tracingPosterStatus"/>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="small" @click="closeDialog">取消</el-button>
                    <el-button size="small" type="primary" class="title" @click="submit">保存
                    </el-button>
                </div>
            </el-dialog>
        </div>
        <div>
            <div v-if="currentPanel == 'add'">
                <add @currentHandler=currentHandler></add>
            </div>
        </div>
        <div>
            <div v-if="currentPanel == 'activity'">
                <activity :formData="single" @currentHandler=currentHandler></activity>
            </div>
        </div>
    </div>
</template>

<script>
import Pagination from "@/components/Pagination"

import Add from '@/views/masket/traceability/add'
import Activity from "@/views/masket/traceability/activity";

export default {
    // 注册组件
    components: {
        Activity,
        Add,
        Pagination
    },
    data() {
        return {
            single: {},
            queryData: {
                tracingPosterName: '',
                tracingPosterStatus: '',
                channel: '',
                date: []
            },
            uptime:'',
            endtime:'',
            query: {},
            tracingPosterStatu: [
                {
                    tracingPosterStatus: '待发布',
                    name: '待发布'
                },
                {
                    tracingPosterStatus: '未开始',
                    name: '未开始'
                },
                {
                    tracingPosterStatus: '进行中',
                    name: '进行中'
                },
                {
                    tracingPosterStatus: '已结束',
                    name: '已结束'
                }
            ],
            channels: [
                {
                    channel: '线上活动',
                    name: '线上活动'
                },
                {
                    channel: '线下活动',
                    name: '线下活动'
                }
            ],
            //推广页面
            popularize: false,
            //编辑页面
            edit: false,
            titles: '编辑',
            //发布页面
            dialogVisible: false,
            //查询页面
            currentPanel: 'list',
            // 分页参数
            pagePagination: {
                currentPage: 1,
                pageSizes: [10, 15, 20, 25],
                pageSize: 10,
                total: 0
            },
            //编辑
            table: {
                /*tracingPosterImage: '',
                shareTitle: '',
                tracingPosterDescription: '',
                tracingPosterStatus: ''*/
            },
            //表格数据
            tableData: [
                /*{
                date: '2016-05-03 至 2020-05-03',
                name1: '海报溯源4',
                name2: '线下海报',
                address: ['已结束']
                }*/
            ]
        }
    },
    mounted() {
        this.queryDataHandle(1, 10)
    },
    methods: {
        queryDataHandle(page = 1, row = 10) {
            if (this.queryData.date != null){
                this.uptime= this.queryData.date[0],
                this.endtime= this.queryData.date[1]
            }
            let tracingPoster = {
                pageNum: page,
                pageSize: row,
                tracingPosterName: this.queryData.tracingPosterName,
                tracingPosterStatus: this.queryData.tracingPosterStatus,
                channel: this.queryData.channel,
                up: this.uptime,
                end: this.endtime
            }
            let that = this
            //列表
            that.$request("/api/tracingPoster/selectTracingPoster/1_0", tracingPoster, "POST").then((data) => {
                that.pagePagination['total'] = data.total
                that.pagePagination['pageSize'] = data.row
                that.tableData = data.rows
            })
        },

        resetQuery() {
            this.queryData = {}
            this.queryDataHandle(1,10)
        },
        //编辑按钮
        updates(row) {
            this.table = row
            this.edit = true
        },
        deletes(row) {
            this.$confirm('确定要删除吗?', '信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    let tracingPoster = {
                        tracingPosterId: row.tracingPosterId
                    }
                    this.$request("/api/tracingPoster/deleteById/1_0", tracingPoster, "DELETE").then((data) => {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.queryDataHandle(this.pagePagination.currentPage, this.pagePagination.pageSize)
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },

        //对话框
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {
                });
        },
        handleCloses(done) {

        },

        //新建活码跳转
        currentHandler(type) {
            this.currentPanel = type
            this.queryDataHandle(1, 10)
        },
        search() {
            this.$message({
                message: '查询成功',
                type: 'success'
            })
        },
        tuiguang(row) {
            this.query = row
            this.popularize = true

        },
        fabu() {
            this.dialogVisible = true
        },
        //推广——下载二维码
        xiazai(url) {
            let that = this;
            let hreLocal = "";
            hreLocal = url;
            this.downloadByBlob(hreLocal, "溯源海报.jpg")
        },
        downloadByBlob(url, name) {
            let image = new Image()
            image.setAttribute('crossOrigin', 'anonymous')
            image.src = url
            image.onload = () => {
                let canvas = document.createElement('canvas')
                canvas.width = image.width
                canvas.height = image.height
                let ctx = canvas.getContext('2d')
                ctx.drawImage(image, 0, 0, image.width, image.height)
                canvas.toBlob((blob) => {
                    let url = URL.createObjectURL(blob)
                    let eleLink = document.createElement('a')
                    eleLink.download = name
                    eleLink.href = url
                    eleLink.click()
                    eleLink.remove()

                    // 用完释放URL对象
                    URL.revokeObjectURL(url)
                })
            }
        },
        //推广——复制链接
        fuzhi(data) {
            let url = data;
            let oInput = document.createElement('input');
            oInput.value = url;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象;
            document.execCommand("Copy"); // 执行浏览器复制命令
            this.$message({
                message: '复制成功！',
                type: 'success'
            });
            oInput.remove()
        },
        //关闭推广弹窗
        closeDialog() {
            this.table = {}
            this.popularize = false
        },
        submit() {
            if (this.table.shareTitle == '1') {
                this.shareTitle = this.table.shareTitle
            } else if (this.table.shareTitle == '2') {
                this.shareTitle = this.table.title
            } else {
                this.shareTitle = ''
            }

            let tracingPoster = {
                tracingPosterImage: this.table.tracingPosterImage,
                shareTitle: this.shareTitle,
                tracingPosterDescription: this.table.tracingPosterDescription,
                tracingPosterStatus: this.table.tracingPosterStatus,
                tracingPosterId: this.table.tracingPosterId
            }
            let that = this
            //列表
            that.$request("/api/tracingPoster/saveTracingPoster/1_0", tracingPoster, "POST").then((data) => {
                this.$message({
                    message: '修改成功',
                    type: 'success'
                })
                this.edit = false
            })
        },
        //统计跳转
        statisti(row) {
            this.single = row;
            this.currentPanel = 'activity';
        },
        tableRowChange(val) {
            if (val.length > 0) {
                this.titleCurrentPanel = true
            } else {
                this.titleCurrentPanel = false
            }
            this.multipleSelection = val;
        },
    }

}
</script>

<style>
.interspaceH {
    height: 30px;
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}
</style>
